<template>
  <div id="map">地图加载中...</div>
</template>
<script>
  import {
    domReady,
    plusReady
  } from 'common/js/ning/index.js'
  import apiClient from 'common/js/ning/ApiClient.js'
  import Broadcast from 'common/js/ning/Broadcast.js'
  export default {
    data() {
      return {
      	map:null
      }
    },
    created() {
      plusReady(this.plusReady)
      this.queryLockRecord();
    },
    mounted() {},
    methods: {
      plusReady() {
        this.cw = plus.webview.currentWebview()
			  this.map = new plus.maps.Map("map")
			  this.map.centerAndZoom(new plus.maps.Point(116.3977,39.906016), 19)
			   new Broadcast().listen('userlocation', (e) => {
			   	this.getUserLocation()
		    })
			  this.map.showZoomControls( true );
				this.onstatuschanged()
			  this.getUserLocation()
//			  this.geocode()
//			  this.reverseGeocode()
//			  this.convertCoordinates()
//				this.calculateDistance()
//					this.calculateArea()
//					this.getZoom()
      },
      getUserLocation(){
      	let _self=this;
      	_self.map.getUserLocation(function ( state, point ){
					if( 0 == state ){
//							_self.map.setCenter(new plus.maps.Point(point.longitude,point.latitude))
						_self.map.centerAndZoom(new plus.maps.Point(point.longitude,point.latitude), 17)
						_self.resetMap();
						_self.map.showUserLocation( true )
						_self.addMarker(point.longitude,point.latitude)
					}else{
						alert( "Failed!" );
					}
				});
      },
      geocode(){
      	let _self=this;
//    	plus.maps.Map.geocode( address, options, successCallback, errorCallback );
//      将地理位置信息转换为坐标点。 转换成功通过successCallback返回，转换失败则通过errorCallback返回。
         plus.maps.Map.geocode("文峰区聂村小学",{city:"安阳"},function(event){
					var address = event.address;  // 转换后的地理位置
					var point = event.coord;  // 转换后的坐标信息
					var coordType = event.coordType;	// 转换后的坐标系类型
					alert("Coord:"+JSON.stringify(point));
					_self.map.centerAndZoom(new plus.maps.Point(point.longitude,point.latitude), 19)
				},function(e){
					alert("Failed:"+JSON.stringify(e));
			});
    },
    reverseGeocode(longitude,latitude){
    	var point = new plus.maps.Point(longitude,latitude);
				plus.maps.Map.reverseGeocode(point,{},function(event){
					var address = event.address;  // 转换后的地理位置
					var point = event.coord;  // 转换后的坐标信息
					var coordType = event.coordType;	// 转换后的坐标系类型
					alert("Address:"+address);
				},function(e){
					alert("Failed:"+JSON.stringify(e));
				});
    },
    convertCoordinates(){
    	//坐标转换 仅支持百度
    	var point = new plus.maps.Point(116.3447905236,39.9663258208);
			plus.maps.Map.convertCoordinates(point,{},function(event){
				var point = event.coord;  // 转换后的坐标值
				var coordType = event.coordType;	// 转换后的坐标系类型
				alert("Success:"+JSON.stringify(event));
			},function(e){
				alert("Failed:"+JSON.stringify(e));
			});
    },
    calculateDistance(){
    	//计算两个点之间的距离
    	var point1 = new plus.maps.Point(116.351442,39.972614);
			var point2 = new plus.maps.Point(116.340788,39.973319)
			plus.maps.Map.calculateDistance(point1,point2,function(event){
				var distance = event.distance;  // 转换后的距离值
				alert("Distance:"+distance);
			},function(e){
				alert("Failed:"+JSON.stringify(e));
			});
    },
    calculateArea(){
//  	计算指定地理区域的面积，单位为平方米。 注：此功能仅百度地图支持，高德地图暂不支持此功能。
			var bounds = map.getBounds();
			plus.maps.Map.calculateArea( bounds, function(event){
				var area = event.area;  // 计算后的面积值
				alert("Area:"+area);
			}, function(e){
				alert("Failed:"+JSON.stringify(e));
			} );
   },
   setCenter(longitude,latitude){
	   	var center = new plus.maps.Point(longitude,latitude);
			this.map.setCenter( center );
   },
   getCenter(){
   	var center = this.map.getCenter();
		alert( JSON.stringify(center) );
   },
   setZoom(zoom){
   		this.map.setZoom(zoom);
   },
   getZoom(){
   	 alert( this.map.getZoom());	
   },
   resetMap(){
   	 this.map.reset();
   },
   setMapType(type){
   		if(type==1){
   			this.map.setMapType(plus.maps.MapType.MAPTYPE_NORMAL);
   		}else{
   			this.map.setMapType( plus.maps.MapType.MAPTYPE_SATELLITE );
   		}
   },
   getMapType(){
   	alert(map.getMapType()==plus.maps.MapType.MAPTYPE_SATELLITE?"卫星视图":"街道视图" );
   },
   addMarker(longitude,latitude){
		  let marker=new plus.maps.Marker(new plus.maps.Point(longitude,latitude));
			marker.setIcon("/logo.png");
			marker.setLabel("HBuilder");
			let bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
			marker.setBubble(bubble);
			this.map.addOverlay(marker);
   },
   onstatuschanged(){
   	var _self=this;
   	this.map.onstatuschanged = function(e){
			_self.reverseGeocode(e.center.longitude,e.center.latitude)
			_self.addMarker(e.center.longitude,e.center.latitude)
		}
   },
   queryLockRecord(){
// 	apiClient("GET","http://bike.eeun.cn/iot/weixin/queryLockRecord?DEVICE_ID=3001DA2F&CHANNEL=1",{},function(success){
// 		alert(success)
// 	},function(error){
// 		alert(error)
// 	})
   }
  }
}
</script>
<style lang="css">
 #map {
	width: 100%;
	position: fixed;
	top: 0px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
</style>